<template>
	<!--这里是登录页面-->
	<div id="login">
		<!--登录背景图-->
		<img src="../../public/images/login.png" class="bg_image" />
		<!--登录盒子-->
		<div class="login_box">
			<el-form class="login_from" 
				label-position="top"
				:rules="rules_login"
				:model="login"
				ref="loginFrom">
				<label class="login_title">log in</label>
				<el-form-item label="用户名" class="username_item" prop="username">
				    <el-input v-model="login.username" placeholder="3228548975@qq.com"></el-input>
				  </el-form-item>
				  <el-form-item label="密码" class="password_item" prop="password">
				    <el-input type="password" v-model="login.password" placeholder="Enter your password"></el-input>
				  </el-form-item>
				  <el-form-item>
					  <el-button class="sumbit" type="primary" @click="sumbit">log in</el-button>
				  </el-form-item>
				  <el-form-item>
					  <el-checkbox v-model="login.rememberMe" style="font-weight: bold;">Remember Me</el-checkbox>
				  </el-form-item>
			</el-form>
			<div class="register">Don't have an account yat? <a href="/register">register</a></div>
		</div>
	</div>
</template>

<script>
	export default {
	  data() {
	    return {
	      login:{},
		  /**
		   * 登录验证规则
		   */
		  rules_login:{
			username:[
				{ required: true, message: '请填写用户名', trigger: 'blur' },
				{ type: 'email',message: '请输入正确的用户格式',trigger: ['blur', 'change']}
			],
			password:[
				{ required: true, message: '请输入密码', trigger: 'blur' },
				{min:8,max:15,message:'密码8-15个字符',trigger:'blur'}
			]  
		  }
	    }
	  },
	
	  methods: {
	    sumbit:function(){
			this.$refs.loginFrom.validate(res=>{
				//console.log(res)
				if(res){
					/**
					 * 登录请求
					 */
					this.$axios({
					  method: 'post',
					  url: '/login',
					  params: {
					    username: this.login.username,
					    password: this.login.password
					  }
					})
					  .then(response => {
					    //console.log(response);
						if(response.code==200){
							//登录成功
							 this.$message.success('登录成功');
							 
							 /**
							  * 判断记住我
							  */
							 if(this.login.rememberMe){
							 	console.log("记住我")
							 	/**
							 	 * 把账号和密码保存在本地
							 	 */
							 	localStorage.setItem("loginData",JSON.stringify(this.login))
							 }else{
								localStorage.removeItem("loginData")
							 }
							 
							 
							 /**
							  * 带参跳转页面
							  */
							this.$router.push({ path: '/user_list'});
							 /**
							  * 把用户信息保存到session中
							  */
							 sessionStorage.setItem('user', JSON.stringify(response.data));
						}else{
							//登录失败
							this.$message.error('请检查用户名或密码');
						}
					  })
						.catch(error => {
					      // 处理错误响应
					      this.$message.error('网络错误');
					    });
				}
			})
			
		}
	  },
	
	  mounted() {
		let loginData=localStorage.getItem("loginData")
		if(loginData!=null){
			this.login=JSON.parse(loginData)
		}
	  }
	}
</script>

<style>
	#login{
		width: 100%;
		height: 100%;
		background-color: #4562d2;
		text-align: center;
		position: relative;
	}
	.bg_image{
		width: 1430px;
		height: 100%;
	}
	.login_box{
		height: 515px;
		width: 475px;
		background-color: #fff;
		position: absolute;
		top: 89px;
		left: 736px;
		text-align: center;
	}
	.login_from{
		width: 360px;
		height: 400px;
		position: absolute;
		top: 57.5px;
		left: 49px;
		text-align: left;
	}
	.login_title{
		font-size: 22px;
		font-weight: bold;
	}
	.username_item{
		margin-top: 40px;
		color: #000;
		font-weight: bold;
	}
	.password_item{
		color: #000;
		font-weight: bold;
	}
	.register{
		font-size: 12px;
		position: absolute;
		bottom: 40px;
		left: 109px;
		font-weight: bold;
	}
	.sumbit{
		margin-top: 10px;
		width: 400px;
		color: #fff;
		height: 500px;
	}
</style>